<script setup>
import { reactive, ref, onMounted } from "vue";
import api from "../../api/index";
import { useStore } from 'vuex'
import { RouterLink, useRouter } from "vue-router";
import axios from "axios";

const store = useStore()

const ordersSession = reactive([])//这是一个数组
const orderList = reactive([])//这也是一个数组
const order_form = reactive({
  orderId: "",
  username: "",
  orderDate:"",
  shipAddress1:"",
  shipAddress2:"",
  shipCity:'',
  shipState:'',
  shipZip:'',
  shipCountry:'',
  billAddress1:'',
  billAddress2:'',
  billCity:'',
  billZip:'',
  billCountry:'',
  billState:'',
  courier:'',
  totalPrice:'',
  billToFirstName:'',
  billToLastName:'',
  shipToFirstName:'',
  shipToLastName:'',
  creditCard:'',
  expiryDate:'',
  cardType:'',
  locale:'',
  status:'',
  state:'',
  sendOut:'',
  lineItems:[
    {
      item:{
        attribute1: "",
        attribute2: "",
        attribute3: "",
        attribute4: "",
        attribute5: "",
        itemId: "",
        listPrice: 0,
        productId: "",
        status: "",
        supplierId: 0,
        unitCost: 0
      },
      itemId: "",
      lineNumber: 0,
      orderId: 0,
      quantity: 0,
      total: '',
      unitPrice: 0
    },
    {
      item:{
        attribute1: "",
        attribute2: "",
        attribute3: "",
        attribute4: "",
        attribute5: "",
        itemId: "",
        listPrice: 0,
        productId: "",
        status: "",
        supplierId: 0,
        unitCost: 0
      },
      itemId: "",
      lineNumber: 0,
      orderId: 0,
      quantity: 0,
      total: '',
      unitPrice: 0
    },
    {
      item:{
        attribute1: "",
        attribute2: "",
        attribute3: "",
        attribute4: "",
        attribute5: "",
        itemId: "",
        listPrice: 0,
        productId: "",
        status: "",
        supplierId: 0,
        unitCost: 0
      },
      itemId: "",
      lineNumber: 0,
      orderId: 0,
      quantity: 0,
      total: '',
      unitPrice: 0
    }
  ]
})

const account = reactive({
  account_userid:'0',
  account_email:'',
  account_firstname:'',
  account_lastname:'',
  account_status:'',
  account_addr1:'',
  account_addr2:'',
  account_city:'',
  account_state:'',
  account_zip:'',
  account_country:'',
  account_phone:'',
  account_favCategory:''
})

onMounted(() => {
  console.log(store.state.account_userid);
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  console.log(account.account_userid);
  getData()
})
//页面刚出现时调用的方法
const getData = () => {
  api.getOrderList().then(res =>{
    //这里首先要判断一下状态码
    var statusCode = res.data.status;
    console.log("statusCode is : "+statusCode);
    if (statusCode == "400"){
      console.log(res.data.message);
      //这里还要写一个逻辑，跳转到登录界面，还没写
    }else if (statusCode == "200"){
      ordersSession.splice(0, ordersSession.length)//清空旧数据
      ordersSession.push(...res.data.data);//update,from date results,第一个data是http里的，这个data包括我们的status,message和data。第二个data是我们commonResponse里面的，存的就是orderList.
      console.log(ordersSession);
      //这次接收的真的不止一个对象了！数组里有好多个对象了。太多了，不持久化了！
      orderList.push(...res.data.data);
      console.log("orderList.length is : "+orderList.length);
    }
  }
  )
}

const sendOut = (orderId) => {
  api.handleSendOut(orderId).then(res =>{
//这里首先要判断一下状态码
        var statusCode = res.data.status;
        console.log("statusCode is : "+statusCode);
        if (statusCode == "400"){
          console.log(res.data.message);
          //这里还要写一个逻辑，跳转到登录界面，还没写
        }else if (statusCode == "200"){
          ordersSession.splice(0, ordersSession.length)//清空旧数据
          ordersSession.push(...res.data.data);//update,from date results,第一个data是http里的，这个data包括我们的status,message和data。第二个data是我们commonResponse里面的，存的就是orderList.
          console.log(ordersSession);
          //这次接收的真的不止一个对象了！数组里有好多个对象了。太多了，不持久化了！
          orderList.push(...res.data.data);
          console.log("orderList.length is : "+orderList.length);
        }
  }
  )
  location.reload();//重新加载页面
}

const signOff = () =>{
  //清除客户端的session
  store.commit("setAccountUserid",'');
  store.commit("setAccountEmail",'');
  store.commit("setAccountFirstName",'');
  store.commit("setAccountLastName",'');
  store.commit("setAccountStatus",'');
  store.commit("setAccountAddr1",'');
  store.commit("setAccountAddr2",'');
  store.commit("setAccountCity",'');
  store.commit("setAccountState",'');
  store.commit("setAccountZip",'');
  store.commit("setAccountCountry",'');
  store.commit("setAccountPhone",'');
  store.commit("setAccountfavCategory",'');
  //清楚服务端的session，这里又要请求服务器了，我先不写吧。
  //清楚页面中的account
  account.account_userid=store.state.account_userid;
  account.account_email=store.state.account_email;
  account.account_firstname=store.state.account_firstname;
  account.account_lastname=store.state.account_lastname;
  account.account_status=store.state.account_status;
  account.account_addr1=store.state.account_addr1;
  account.account_addr2=store.state.account_addr2;
  account.account_city=store.state.account_city;
  account.account_state=store.state.account_state;
  account.account_zip=store.state.account_zip;
  account.account_country=store.state.account_country;
  account.account_phone=store.state.account_phone;
  account.account_favCategory=store.state.account_favCategory;
  //重返本页面
  // 使用 location.reload() 方法重新刷新页面
  location.reload();
}

</script>


<template>
  <body>
  <div class="top-nav">
    <div class="container clearf">
      <div class="left">
        <router-link to="/main"><a class="item">首页</a></router-link>
      </div>
      <div class="right">

        <template v-if="account.account_userid !== undefined">
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <a @click="signOff" class="item">退出登录</a>
          <router-link to="/account/myAccountForm"><a href="#" class="item">个人主页</a></router-link>
        </template>

        <template v-else>
          <router-link to="/orders/listOrder"><a href="#" class="item">我的订单</a></router-link>
          <router-link to="/account/registerForm"><a href="#" class="item">注册</a></router-link>
          <router-link to="/account/signonForm"><a href="#" class="item">登录</a></router-link>
        </template>

      </div>
    </div>
    <div class="header">
      <div class="container clearf">
        <div class="col-2 logo">宠物商店</div>
        <div class="col-5 search-bar">

          <!--搜索栏目-->
          <form action="searchProduct" method="post" @submit.prevent="searchProducts">
            <input type="text"  id="keyword" name="keyword" size="14" v-model="searchKeyword"  />
            <router-link to="/catalog/SearchProducts" @click="searchProducts()">
              <button type="submit" name="searchProducts" value="Search">搜索</button>
            </router-link>
          </form>

          <div id="productAutoComplete" class="productAutoComplete">
            <ul id="productAutoList" class="productAutoList">
            </ul>
          </div>

        </div>

        <div class="col-2 cart">
          <router-link to="/cart/cart"><a href="#" class="item">我的购物车</a></router-link>
        </div>

      </div>
    </div>
    <div class="main-promote">
      <!--以上是头部信息-->

      <div class="Order" align="center">
        <h2>My Orders</h2>
        <table class="table-2 secondTable">
          <tr>
            <th>Order ID</th>
            <th>Date</th>
            <th>Total Price</th>
            <th>Pay State</th>
            <th>Send Out State</th>
            <th>确认收货</th>
          </tr>
          <tr v-for="order in orderList" :key="order.orderId">
            <td>
              <a href="#">{{order.orderId}}</a>
            </td>
            <td>
              {{order.orderDate}}
            </td>
            <td>
              {{order.totalPrice}}
            </td>
            <td>
              {{order.state}}
            </td>
            <td>
              <div>{{order.sendOut}}</div>
            </td>
            <td v-if="order.state == '已付款'">
              <button @click="sendOut(order.orderId)">点击确认收货</button>
            </td>
          </tr>
<!--          <c:forEach var="order" items="${sessionScope.orderList}">-->
<!--            <tr>-->
<!--              <td>-->
<!--                <a href="viewOrder?orderId=${order.orderId}">${order.orderId}</a>-->
<!--              </td>-->
<!--              <td>-->
<!--                ${order.state}-->
<!--              </td>-->
<!--              <td>-->
<!--                <div>${order.sendout}</div>-->
<!--              </td>-->
<!--              <td>-->
<!--                <c:if test="${order.state == '已付款'}">-->
<!--                  <a href="SendOut?orderid=${order.orderId}">点击确认收货</a>-->
<!--                </c:if>-->
<!--              </td>-->
<!--            </tr>-->
<!--          </c:forEach>-->
        </table>
<!--        <c:if test="${sessionScope.msgListOrder != null}">-->
<!--          <h2>${sessionScope.msgListOrder}</h2>-->
<!--        </c:if>-->
      </div>

  <!--以下是尾部信息-->
  </div>
  </div>
  <div class="footer">
    <div class="container clearf">
      <div class="">

        增值电信业务经营许可证：浙B2-20080224|增值电信业务经营许可证（跨地区）： B2-20150210|浙网文【2022】0403-017号|浙江省网络食品销售第三方平台提供者备案：浙网食A33010001|

        互联网药品信息服务资格证书（浙）-经营性-2018-0010|短消息类服务接入代码使用证书：号【2016】00154-A01|信息网络传播视听许可证：1109364号|出版物网络交易平台服务经营备案号：新出发浙备字第002号|</div>
    </div>
  </div>
  </body>
</template>



<style scoped>
@import "../../assets/css/TopButtomMain.css";
@import "../../assets/css/order.css";
</style>